@charset "utf-8";

@media (prefers-color-scheme: light) {
:root {
  --accent-hover: #1D4ED8;
  --accent-active: #1E3A8A;
  --support: rgba(56, 58, 76, 0.7);
}
}

@media (prefers-color-scheme: dark) {
  :root {
  --accent-hover: #3B82F6;
  --accent-active: #1D4ED8;
  --support: rgba(229, 231, 235, 0.6);
}
}

ul:not(#main-nav ul){margin-left: 1em}
h2{font-size: 1.618em;}
img{border-radius: 0.5em}

main>section, footer{padding: 2em 1em}
section section{box-shadow: none}
section>nav{display: none}

details:not(#transcript):not(:last-of-type):after, #recent-works figure:not(:last-of-type)::after{display: block; margin-top: 1.618em; width: 100%; height: 6px; content: ''; box-shadow: var(--divider); border-radius: 6px}
#recent-works figure:not(:last-of-type)::after{position: absolute; top: 100%; left: 0}

summary{list-style: none; display: flex; align-items: center; cursor: pointer; font-size: 1.125em}
summary::-webkit-details-marker{display: none !important}
summary:not(details details summary):before{content: "▸"; display: inline-block; margin: 0 0.5em 0 0.1em; transform: scale(2); transition: transform 0.2s ease}
details[open] summary:before{transform: rotate(90deg) scale(2)}

#transcript summary{width: max-content; text-decoration: underline}
#transcript summary::after{content: ""; display: inline-block; margin-left: 0.5rem; width: 1.5em; height: 1.5em; background: url(../icons/back.svg) no-repeat; transform: rotate(-90deg);  transition: transform 0.2s ease}
#transcript[open] summary::after{transform: rotate(90deg)}
#transcript[open] summary{color: var(--secondary)}

details div{opacity: 0; transform: translateY(-0.5rem); transition: max-height 0.4s ease, opacity 0.3s ease, transform 0.3s ease}
details[open] div{opacity: 1; transform: translateY(0); max-height: 1500px}

details[open] summary:not(#transcript summary){color: var(--accent)}
details audio{width: 100%}
details div{display: flex; flex-direction: column; gap: 1.618em; padding: 1.618em 0}
#transcript{margin-top: 1.618em}
#transcript div{padding: 1.618em 0 0 0}
dl{display: flex; flex-direction: column; gap: 0.809em}
dt:not(:first-of-type){margin-top: 1.618em}
dt{font-weight: 600;}
#recent-works figure{display: flex; gap: 1.618em; padding: 1.618em 0; position: relative}
#recent-works figure:not(:first-of-type){margin-top: 1.618em}

#testimonials figure{display: none; text-align: center; transition: opacity 0.4s ease}
#testimonials figure blockquote{margin: 1.618em 0}
#testimonials figure.active{display: block; opacity: 1}
#testimonials img{width: 80%}
#testimonials>a[href="#web-design-cost-calculator"]{margin-bottom: 3em}
.testimonial-nav{display: flex; justify-content: center; flex-direction: row; gap: 1em; padding: 0; margin-bottom: 3em}
.testimonial-nav button{border: none; background: var(--accent); color: var(--cta-color); font-size: 1em; padding: 1em 2em; cursor: pointer; border-radius: 0.5em}
.testimonial-nav button:hover{background: var(--accent-active)}

#process ul{display: flex; flex-direction: column; gap: 1.618em}



#cost{padding: 1em 1.618em; border-radius: 0.5em; box-shadow: var(--divider); border: 1px solid var(--bg); margin-bottom: 1.618em}
#cost td:nth-of-type(2){text-align: right; color: var(--primary)}

#pricing>section{gap: 1em}
#pricing legend{padding: 0 0.5em; color: var(--support)}
#pricing label{color: var(--primary)}
.flex-row{display: flex; flex-direction: row}
.flex{display: flex; flex-direction: column}

#pricing fieldset{padding: 1.618em; gap: 1.618em; border-radius: 0.5em; border: 1px solid var(--support)}
#pricing form{gap: 1em}
#foundation{justify-content: space-between}
#pages{padding: 1.5em; gap: 1.618em; border-radius: 0.25em; box-shadow: var(--neu)}
#pages label{gap: 1em; height: 24px; align-items: center}
#pages input{flex-grow: 1}

#addons label{padding: 0.75em 1.5em; box-shadow: var(--neu); border-radius: 0.25em}

#pages input[type="range"]{-webkit-appearance: none; appearance: none; width: 100%; height: 10px; background: var(--bg); border-radius: 10px; outline: none; box-shadow: var(--divider)}

#pages input[type="range"]::-webkit-slider-thumb{-webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); cursor: pointer; box-shadow: var(--neu); transition: all 0.2s ease; border: 2px solid var(--bg)}

#pages input[type="range"]::-moz-range-thumb{width: 24px; height: 24px; border: none; border-radius: 50%; background: var(--accent); cursor: pointer; box-shadow: var(--neu); transition: all 0.2s ease; border: 2px solid var(--bg)}


#foundation label{display: flex; flex-direction: row; align-items: center; padding: 0.75em 1.5em; gap: 0.5em; border-radius: 0.25em; box-shadow: var(--neu)}
input[type="radio"][value="hand-coded"]{appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 24px; height: 24px; background: url('../icons/code.svg') no-repeat center; background-size: contain; cursor: pointer}
input[type="radio"][value="wordpress"]{appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 20px; height: 20px; background: url('../icons/wp.svg') no-repeat center; background-size: contain; cursor: pointer}




#settings form{flex-direction: column}
#settings fieldset{display: flex; flex-direction: column; gap: 2em; padding: 1em; border-radius: 8px; border: 1px solid var(--accent); color: var(--secondary); font-size: 18px; line-height: 1.618;}
#settings legend{padding: 1.125em; color: var(--primary); font-weight: 600}
#settings label{display: flex; justify-content: space-between; align-items: center; gap: 0.5em; margin: 0.5em 0; font-size: 17px}
#settings output{min-width: 6ch; text-align: right; font-size: 0.9em; color: var(--accent)}
#settings button{margin-top: 32px; padding: 16px; border-radius: 8px; box-shadow: none; border: 1px solid var(--accent); background: none; color: var(--secondary); font-size: 18px}
#settings input{accent-color: var(--accent); flex-grow: 1}
#settings input[type="checkbox"]{transform: scale(1.5); margin-right: auto}
#settings.open{right: 0}


footer a{align-items: center; gap: 0.5em}


html{scroll-behavior: smooth}





@media screen and (min-width: 1200px) {
*:focus-visible{border: 1px solid var(--secondary);}
}


@media screen and (max-width: 400px){
  header{gap: 1em}
  header>a{font-size: 0.9em}
  #settings{width: 100%; right: -100%}
}

@media screen and (max-height: 740px){
  #hero{gap: 1.5em}
  #hero div{gap: 0.5em}
  #hero div:nth-of-type(2) img{width: 30%}
  h1{font-size: 8vw}
  #settings fieldset{gap: 1em}
}